<template>
  <view class="box">
    <view v-for="(item, index) in list" :key="index" class="contain">
      <view class="contain_left">
        <view>
          <uni-icons
            style="padding-right: 4%"
            type="person"
            size="30"
          ></uni-icons>
          {{ item.driverName }}
        </view>
        <view>
          <uni-icons
            style="padding-right: 4%"
            type="staff-filled"
            size="30"
          ></uni-icons>
          {{ getDriverDept(item.driverDept) }}
        </view>
        <view>
          <uni-icons
            style="padding-right: 4%"
            type="phone"
            size="30"
          ></uni-icons>
          {{ item.driverPhone }}
        </view>
      </view>
      <view class="contain_right">
        <uni-icons
          @click="edit(item)"
          style="padding-right: 20px"
          type="compose"
          size="35"
        ></uni-icons
        ><uni-icons @click="del(item)" type="trash" size="35"></uni-icons>
      </view>
    </view>
    <view style="height: 80px"></view>
    <view class="below">
      <navigator url="/pages/drivermanagement/add" hover-class="none">
        <u-button type="primary"> 新增驾驶员</u-button>
      </navigator>
    </view>

    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog
        cancelText="取消"
        confirmText="确定"
        title="删除确认"
        content="确定要删除该驾驶员吗？"
        @confirm="dialogConfirm"
        @close="dialogClose"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import {
  list,
  deptList,
  getDetail,
  remove,
  add,
  update,
} from "@/api/drivermanagement";
export default {
  name: "",

  data() {
    return {
      list: [],
      deptList: [],
      row: {},
    };
  },
  async onShow() {
    const res = await deptList();
    this.deptList = res.data[0].children;
    this.getList();
  },
  mounted() {},

  methods: {
    getDriverDept(val) {
      return this.deptList.find((item) => item.id === val)?.deptName;
    },
    async getList() {
      const res = await list();
      this.list = res.data.records;
    },
    edit(item) {
      uni.navigateTo({
        url: `/pages/drivermanagement/edit?row=${JSON.stringify(item)}`,
      });
    },
    del(item) {
      this.row = item;
      this.$refs.alertDialog.open();
    },
    async dialogConfirm() {
      await remove(this.row.id);
      this.getList();
      uni.showToast({
        title: "删除成功",
        duration: 1500,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f2f2f2;
}
.box {
  position: relative;
  min-height: 100vh;
}
.contain {
  width: 96%;
  height: 200px;
  padding: 5%;
  background-color: #fff;
  margin: 2%;
  margin-top: 3%;
  border-radius: 10px;
  display: flex;
  .contain_left {
    line-height: 42px;
    flex: 70%;
  }
  .contain_right {
    padding-top: 15%;
  }
}
.below {
  width: 90%;
  position: absolute;
  left: 5%;
  bottom: 2%;
}
</style>